<script>
import UNavbar from "@/uni_modules/uview-ui/components/u-navbar/u-navbar.vue";
import request from "../../common/request";

export default {
  name: "driver",
  components: {UNavbar},
  data(){
    return{
      tabBar:[
        {
          icon:'/static/driver/t1.png',
          selectIcon:'/static/driver/t1a.png',
          text:'抢单'
        },
        {
          icon:'/static/driver/t2.png',
          selectIcon:'/static/driver/t2a.png',
          text:'订单'
        },
        {
          icon:'/static/driver/t3.png',
          selectIcon:'/static/driver/t3a.png',
          text:'司机'
        }
      ],
      tabIndex:0,
      menuIndex:0,
      // ['进行中','已完成','已取消']
      menuList:[
        {
          value:2,
          name:'进行中'
        }  ,
        {
          value:3,
          name:'已完成'
        },
        {
          value:4,
          name:'已取消'
        }
      ],
      location:uni.getStorageSync('location'),
      waitOrderList:[],//待抢订单
      orderList:[],//我的订单
      userinfo:uni.getStorageSync('userinfo')
    }
  },
  onLoad() {
    this.getOrder();
    this.getOrder2();
  },
  methods:{
    navigateTo(url){
      uni.navigateTo({
        url
      })
    },
    getOrder2(){
      request({
        url:'/d/order/index2',
        data:{
          page:1,
          pageSize:999,
          status:this.menuList[this.menuIndex].value
        }
      }).then(res=>{
        this.orderList = res.data.list;
      })
    },
    getOrder(){
      /*latitude: 39.918792
longitude: 116.459775*/
      request({
        url:'/d/order/qdList',
        data:{
          page:1,
          pageSize:999,
          city:this.location.city,
          lat:this.location.latitude || 39.918792,
          lng:this.location.longitude || 116.459775,
        }
      }).then(res=>{
        this.waitOrderList = res.data.list;
      })
    },
    bullet(orderSn){
      uni.showModal({
        title:'提示',
        content:'是否抢单?',
        showCancel:true,
        success:({confirm})=>{
          if (confirm){
            request({
              url:'/d/order/receiveOrder',
              method:'post',
              data:{
                orderSn:orderSn

              }
            }).then(()=>{
              uni.showToast({
                title:'抢单成功',
                icon:'none'
              });
              this.getOrder();
            })
          }
        }
      })
    },
    jumo(sn){
      uni.navigateTo({
        url:`/pages/order-detail/order-detail?sn=${sn}`
      })
    },
    songda(orderSn){
      uni.showModal({
        title:'提示',
        content:'是否送达?',
        showCancel:true,
        success:({confirm})=>{
          if (confirm){
            request({
              url:'/d/order/qrsd',
              method:'post',
              data:{
                orderSn:orderSn

              }
            }).then(()=>{
              uni.showToast({
                title:'送达成功',
                icon:'none'
              });
              this.getOrder();
            })
          }
        }
      })
    },
  }
}

</script>

<template>
<view class="driver">
  <u-navbar bg-color="#fff"  title="司机" placeholder></u-navbar>
  <scroll-view v-if="tabIndex===0" scroll-y class="scroll-view">
    <text style="height: 100px;width: 100%;display: flex;align-items: center;justify-content: center" v-if="!waitOrderList.length">没有订单~</text>
    <view v-else class="order-list">
      <view @click="bullet(item.order_sn)" class="item" v-for="(item,index) of waitOrderList" :key="index">
        <view class="header">
          <text>即时</text>
          <view>
            <text>距您{{item.distance}}</text>
<!--            <image src="/static/close.png"></image>-->
          </view>
        </view>
        <view class="address">
          <view>
            <view></view>
            <text>{{item.start_addr}}</text>
          </view>
          <view>
            <view></view>
            <text>{{item.end_addr}}</text>
          </view>
        </view>
        <view class="car-type">需要车型 : 微面</view>
        <view class="price">
          <text>{{item.total}}</text>
          <text>元</text>
          <text>全额支付</text>
        </view>
        <view class="tag">
          <text>已全额支付</text>
          <text>预付订单</text>
          <text>减信息费10元</text>
        </view>
      </view>
    </view>
  </scroll-view>
  <view v-if="tabIndex===1" class="menu-list">
    <text @click="()=>{
      menuIndex = index;
      getOrder2();
    }" :class="{
      active:menuIndex === index
    }" v-for="(item,index) of menuList" :key="index">{{item.name}}</text>
  </view>
  <scroll-view v-if="tabIndex===1" scroll-y class="scroll-view">
    <view class="diver-order">
      <view @click="jumo(item.order_sn)" class="item" v-for="(item,index) of orderList" :key="index">
        <view class="header">
          <text>货运</text>
          <text>{{item.statusDesc}}</text>
        </view>
        <view class="time">
          <text>即时</text>
          <text>{{item.createtime}}</text>
        </view>
        <view class="address">
          <view>
            <text>装</text>
            <text>{{ item.start_addr }}</text>
          </view>
          <view>
            <text style="background: #FF494B ">卸</text>
            <text>{{item.end_addr}}</text>
          </view>
        </view>
        <view class="option">
          <text>￥{{item.total}}</text>
          <view @click="songda(item.order_sn)" v-if="menuIndex===0">确认送达</view>
        </view>
      </view>
    </view>
  </scroll-view>
  <scroll-view v-if="tabIndex===2" scroll-y class="scroll-view">
    <view class="userinfo">
      <view class="avatar">
        <image :src="userinfo.avatar"></image>
        <text>{{userinfo.nickname}}</text>
        <text>手机：{{userinfo.mobile}}</text>
      </view>
      <view class="option">
        <view  @click="navigateTo('/pages/my/info?d=1')" class="item">
          <view>
            <image src="/static/user1.png"></image>
            <text>个人信息</text>
          </view>
          <text> ></text>
        </view>
        <view @click="navigateTo('/pages/my/mycar?d=1')" class="item">
          <view>
            <image src="/static/user2.png"></image>
            <text>我的车辆</text>
          </view>
          <text> ></text>
        </view>
        <view class="item">
          <view>
            <image src="/static/user3.png"></image>
            <text>我的接单码</text>
          </view>
          <text> ></text>
        </view>
        <view @click="navigateTo('/pages/wallet/wallet')" class="item">
          <view>
            <image src="/static/user3.png"></image>
            <text>我的钱包</text>
          </view>
          <text> ></text>
        </view>
      </view>
    </view>
  </scroll-view>
  <view  class="tab-bar">
    <view @click="tabIndex = index" :class="{
      active:index===tabIndex
    }" v-for="(item,index) of tabBar" :key="index">
      <image :src="tabIndex===index?item.selectIcon:item.icon"></image>
      <text>{{item.text}}</text>
    </view>
  </view>
</view>
</template>

<style scoped lang="scss">
text,view{
  box-sizing: border-box;
}
.driver{
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  .diver-order{
    padding: 20rpx 15rpx;
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    width: 100%;
    .item{
      width: 100%;
      background: #FFFFFF;
      border-radius: 16rpx;
      padding: 35rpx 35rpx  0 35rpx;
      display: flex;
      flex-direction: column;
      .option{
        height: 120rpx;
        border-top: 1rpx solid #f2f2f2;
        width: 100%;
        margin-top: 38rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        view{
          width: 175rpx;
          height: 56rpx;
          border-radius: 28rpx;
          border: 1px solid #FF494B;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 400;
          font-size: 26rpx;
          color: #FF494B;
        }
        >text{
          font-weight: bold;
          font-size: 40rpx;
          color: #FF494B;
        }
      }
      .address{
        display: flex;
        margin-top: 33rpx;
        flex-direction: column;
        width: 100%;
        gap: 28rpx;
        >view{
          display: flex;
          align-items: center;
          text:last-child{
            flex: 1;
            font-weight: bold;
            margin-left: 12rpx;
            font-size: 36rpx;
            color: #111111;
          }
          text:first-child{
            width: 28rpx;
            height: 28rpx;
            background: #222836;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 400;
            font-size: 18rpx;
            color: #FFFFFF;
          }
        }
      }
      .time{
        font-weight: 500;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        color: #222222;
        text:last-child{
          font-size: 26rpx;
          margin-left: 12rpx;
        }
      }
      .header{
        justify-content: space-between;
        display: flex;
        align-items: center;
        text:first-child{
          height: 34rpx;
          padding: 0 13rpx;
          display: flex;
          align-items: center;
          background: #F1F4FB;
          border-radius: 8rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #222222;
        }
        text:last-child{
          font-weight: 400;
          font-size: 24rpx;
          color: #FF494B;
        }
      }
    }
  }
  .menu-list{
    height: 88rpx;
    width: 100%;
    display: flex;
    text{
      width: 33.333%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 3rpx;
      &.active{
        position: relative;
        color: #885FFF;
        &:after{
          content: "";
          width: 142rpx;
          height: 6rpx;
          position: absolute;
          background: #885FFF;
          border-radius: 3rpx;
          bottom: 0;
        }
      }
    }
  }
  .scroll-view{
    width: 100%;
    height: 0;
    flex:1;
    background-color: #f8f8f8;
    .userinfo{
      width: 100%;
      padding-top: 20rpx;
      .option{
        background-color: #fff;
        width: 750rpx;
        margin-top: 20rpx;
        padding-left: 60rpx;
        display: flex;
        flex-direction: column;
        .item{
          height: 120rpx;
          width: 100%;
          border-bottom: 1rpx solid #f2f2f2;
          display: flex;
          align-items: center;
          padding-right: 60rpx;
          justify-content: space-between;
          &:last-child{
            border-bottom: unset;
          }
          >text{
            color: #D6D6D6;
          }
          view{
            display: flex;
            align-items: center;
            text{
              font-weight: 500;
              font-size: 28rpx;
              color: #333333;
              margin-left: 30rpx;
            }
            image{
              width: 42rpx;
              height: 42rpx;
            }
          }
        }
      }
      .avatar{
        width: 100%;
        height: 270rpx;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text:nth-of-type(1){
          font-weight: 500;
          font-size: 42rpx;
          color: #222222;
          margin-top: 23rpx;
        }
        text:nth-of-type(2){
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          margin-top: 21rpx;
        }

        image{
          width: 111rpx;
          height: 111rpx;
          background: #FFFFFF;
          border-radius: 50%;
        }
      }
    }
    .order-list{
      padding: 20rpx 15rpx;
      display: flex;
      gap:24rpx;
      flex-direction: column;
      .item{
        padding: 22rpx 30rpx;
        display: flex;
        flex-direction: column;
        background: #FFFFFF;
        border-radius: 16rpx;
        .tag{
          margin-top: 23rpx;
          display: flex;
          gap: 5rpx;
          flex-wrap: wrap;
          text{
            height: 44rpx;
            padding: 0 14rpx;
            background: #FFEBEB;
            border-radius: 8rpx;
            display: flex;
            align-items: center;

            font-weight: 500;
            font-size: 22rpx;
            color: #FF494B;
          }
        }
        .price{
          display: flex;
          margin-top: 51rpx;
          align-items: flex-end;
          text:nth-of-type(3){
            font-weight: 400;
            font-size: 30rpx;
            color: #666666;
          }
          text:nth-of-type(2){
            font-weight: 400;
            margin: 0 10rpx;
            font-size: 36rpx;
            color: #F33A3A;
          }
          text:first-child{
            font-weight: bold;
            font-size: 68rpx;
            color: #F33A3A;
          }
        }
        .car-type{
          font-weight: 400;
          margin-top: 60rpx;
          font-size: 30rpx;
          color: #222222;
        }
        .address{
          display: flex;
          flex-direction: column;
          margin-top: 38rpx;
          gap: 43rpx;
          width: 100%;
          >view{
            display: flex;
            text{
              flex: 1;
              font-weight: 500;
              margin-left: 11rpx;
              font-size: 34rpx;
              color: #111111;
              line-height: 48rpx;
            }
            view{
              width: 14rpx;
              height: 14rpx;
              margin-top: 18rpx;
              background: #222836;
              border-radius: 50%;
            }
          }
        }
        .header{
          padding: 0 22rpx;
          width: 100%;
          height: 89rpx;
          background: #F52B12;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          view{
            display: flex;
            align-items: center;
            image{
              width: 36rpx;
              height: 36rpx;
              margin-left: 17rpx;
            }
          }
          text{
            font-weight: bold;
            font-size: 32rpx;
            color: #FFFFFF;
          }
        }
      }
    }
  }
  .tab-bar{
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0rpx -1rpx 1rpx 0rpx rgba(229,229,229,0.75);
    display: grid;
    padding-bottom: env(safe-area-inset-bottom);
    grid-template-columns: repeat(3,1fr);
    view{
      display: flex;
      width: 100%;
      height: 98rpx;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &.active{
        text{
          color: #895FFF;
        }
      }
      text{
        margin-top: 1rpx;
        font-weight: 400;
        font-size: 20rpx;
        color: #333333;
      }
      image{
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
</style>
